<template>
    <div class="page">
        <div class="table-head-tabs">
            <div class="item">
                <img src="../../assets/icon-add.png">
                <span>发布</span>
            </div>
            <div class="item" @click="showScreen = true">
                <img src="../../assets/icon-filter.png">
                <span>筛选</span>
            </div>
            <div class="item" @click="showTable = !showTable">
                <img src="../../assets/icon-liebiao1.png">
                <span>切换</span>
            </div>
        </div>

        <div class="table-box" v-if="showTable">
            <div class="left-label">
                <div class="head">
                    <div>发布人</div>
                    <div>基本信息</div>
                </div>
                <div class="content-label" v-for="label in dataLabel">
                    <div>
                        <div class="name">{{label.name}}</div>
                        <div class="company">{{label.company}}…</div>
                    </div>
                    <div>
                        <div class="type">{{label.type}}</div>
                        <div class="detail">{{label.detail}}</div>
                    </div>
                </div>
            </div>
            <table-view class="table-view" :labels="labels" :data="data" :content-width="400" :line-height="54"/>
        </div>

        <div class="item-box" v-else="">
            <offer-item v-for="(item, key) in data" :key="key" @onclick="handleItemClick"/>
            <van-actionsheet v-model="showPhone">
                <div class="show-phone-view">
                    <p class="title">联系方式</p>
                    <div class="item">发布人<span>黄文君(桐城农商行)</span></div>
                    <div class="item">办公电话<span class="text-blue">0755-82786009</span></div>
                    <div class="item">联系电话<span class="text-blue">17704021318</span></div>
                    <div class="item">联系邮箱<span class="text-blue">service@djs18.com</span></div>
                    <div class="item">QQ/微信<span>17704021318</span></div>
                    <div class="close" @click="showPhone = false">取消</div>
                </div>
            </van-actionsheet>
        </div>

        <top-popup-screen v-model="showScreen">
            <div content="select-box">
                <div class="btn-view">
                    <div @click="showCondition = !showCondition">加载条件</div>
                    <div @click="saveCondition = !saveCondition">保存条件</div>
                </div>

                <div v-if="showCondition" class="condition-box">
                    <div class="title text-red">加载条件</div>
                    <div class="item-list clear-float">
                        <div v-for="(item, k) in demoItems" class="item" :key="k" :class="{'active': k == active}" @click="active = k">{{item}}</div>
                    </div>
                </div>
                <div v-if="saveCondition" class="condition-box">
                    <div class="title text-red">给查询条件命名</div>
                    <div class="saveCondition-box">
                        <input>
                        <span>保存</span>
                    </div>
                </div>

                <telescopic-view label="方向" hide="true">
                    <checkbox-group :items="demoItems" :active="active" @onactive="handleCheckbox"/>
                </telescopic-view>
                <telescopic-view label="模式" hide="true">
                    <checkbox-group :items="demoItems" :active="active" @onactive="handleCheckbox"/>
                </telescopic-view>
                <telescopic-view label="模式">
                    <checkbox-group :items="demoItems" :active="active" @onactive="handleCheckbox"/>
                </telescopic-view>
                <telescopic-view label="模式">
                    <checkbox-group :items="demoItems" :active="active" @onactive="handleCheckbox"/>
                </telescopic-view>
            </div>
        </top-popup-screen>

    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        .table-head-tabs{
            display: flex;
            .item{
                flex: 1;
                text-align: center;
                img{
                    height: 1rem;
                    margin: 1.15rem .5rem;
                    vertical-align: bottom;
                }
                span{
                    font-size: 1.1rem;
                    line-height: 3.3rem;
                }
            }
        }

        .table-box{
            display: flex;
            .left-label{
                width: 15rem;

                .head, .content-label{
                    padding: 0 .7rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 3.3rem;
                    font-size: 1.2rem;
                    white-space: nowrap;

                    .name{
                        font-size: 1.3rem;
                        line-height: 3.3rem;

                    }
                    .company{
                        font-size: 1.1rem;
                        line-height: 1.3rem;
                        margin-bottom: .85rem;
                        width: 8.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-right: .5rem;
                    }
                    .type{
                        width: 1.8rem;
                        height: 1.8rem;
                        line-height: 1.8rem;
                        text-align: center;
                        border-radius: .9rem;
                        background-color: @color-text-blue;
                        color: @color-white;
                        font-size: .9rem;
                        margin: .9rem auto .4rem;
                    }
                    .detail{
                        font-size: 1.2rem;
                        line-height: 1.7rem;
                        margin: 0 auto .5rem;
                    }
                }
                .content-label{
                    height: 5.4rem;
                }
            }
            .table-view{
                flex: 1;
                overflow: hidden;
            }
        }

        .show-phone-view{
            color: @color-text-gray;
            .title{
                font-size: 1.4rem;
                line-height: 4.6rem;
                text-align: center;
                border-bottom: 1px solid @color-line-gray;
                margin-bottom: .3rem;
            }
            .item{
                font-size: 1.5rem;
                line-height: 2.1rem;
                padding: .7rem 1.5rem 0;
                span{
                    float: right;
                    color: @color-text-black;
                }
            }
            .close{
                border-top: .3rem solid @color-bg-gray;
                text-align: center;
                line-height: 4.8rem;
                color: @color-black;
                margin-top: 1.7rem;
            }

        }

        .select-box{
            .btn-view{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 1.5rem;
                height: 3.8rem;
                font-size: 1.3rem;
                color: @color-text-gray;
                border-bottom: 1px solid @color-line-gray;
            }

            .condition-box{
                .title{
                    font-weight: bold;
                    font-size: 1.3rem;
                    line-height:1.9rem;
                    margin: .9rem 1.5rem;
                }
            }

            .saveCondition-box{
                display: flex;
                height: 3.3rem;
                padding: .9rem 1.5rem;
                input{
                    flex: 1;
                    height: 100%;
                    border: 1px solid @color-line-gray;
                    border-top-left-radius: .2rem;
                    border-bottom-left-radius: .2rem;
                    box-sizing: border-box;
                    text-align: center;
                }
                span{
                    width: 6rem;
                    text-align: center;
                    line-height: 3.3rem;
                    height: 100%;
                    background-color: @app-color;
                    color: @color-white;
                }
            }

            .item-list{
                padding-left: 1.5rem;
                padding-bottom: .7rem;
                .item{
                    margin-right: 1.5rem;
                    width: 7.5rem;
                    float: left;
                    height: 3.3rem;
                    line-height: 3.3rem;
                    text-align: center;
                    border-radius: .2rem;
                    background-color: @color-bg-light-gray;
                    &:nth-child(1n+5){
                        margin-top: 1.5rem;
                    }

                    &.active{
                        color: @color-orange;
                        background-color: @color-bg-orange;
                        position: relative;
                        &:after{
                            content: '';
                            display: block;
                            position: absolute;
                            width: 2.2rem;
                            height: 2.2rem;
                            bottom: 0;
                            right: 0;
                            background-image: url("../../assets/option-active.png");
                            background-size: contain;
                            background-position: right bottom;
                            background-repeat: no-repeat;
                        }
                    }
                }
            }

        }
    }

</style>

<script>
    export default {
        data (){
            const labels = [
                {
                    label: '',
                    key: 'label',
                    width: 0
                },
                {
                    label: '7D',
                    key: 'day7',
                },
                {
                    label: '14D',
                    key: 'day14',
                },
                {
                    label: '1M',
                    key: 'month1',
                },
                {
                    label: '2M',
                    key: 'month2',
                }
            ];

            const data = Array(40).fill({
                label: '',
                day7: 4.4,
                day14: 4.4,
                month1: 4.,
                month2: 4.4
            });

            const dataLabel = Array(data.length).fill({
                name: '张云非',
                company: '张家港农商行张家港农商行…',
                type: '出',
                detail: '银行同存',
            });

            return {
                labels,
                data,
                dataLabel,
                showTable: !true,
                showPhone: false,
                showScreen: false,

                demoItems: ['123', '555', '555', '555', '555'],
                showCondition: false,
                saveCondition: false,
                active: [1, 3],
            }
        },
        methods: {
            handleItemClick(type){
                switch (type){
                    case 'phone':
                        this.showPhone = true;
                        break;
                    case 'detail':
                        this.$router.push('/same/offerDetail');
                        break;
                    default:
                }
            },
            handleCheckbox(active){
                console.log(active)
            }
        }
    }
</script>